<template>
    <div class="login-wrapper" ref="screenEle">
        <div class="login-form-wrapper">
            <Logo class="logo-wrapper"></Logo>

            <el-form class="login-form" :rules="rules" :model="loginForm" ref="loginForms">
                <el-form-item prop="name">
                    <el-input type="text" v-model="loginForm.userName" clearable prefix-icon="User" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="text" v-model="loginForm.password" clearable prefix-icon="Lock" placeholder="请输入密码" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="login-form-code">
                        <el-input type="text" clearable prefix-icon="Key" placeholder="请输入验证码"></el-input>
                        <div class="code-box">
                            <img src="@/assets/images/stars.png" />
                            <span>
                                看不清？
                                <a>换一张</a>
                            </span>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button
                        :loading="loading"
                        @click="loginHandler(loginForms)"
                        class="login-form-submit"
                        auto-insert-space
                        size="large"
                        type="primary"
                    >
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { LoginForm } from '@/api/auth/login/types'
import { FormInstance, FormRules } from 'element-plus'

const loading = ref(false)
const loginForms = ref<FormInstance>()
const loginForm = reactive<LoginForm>({
    userName: 'admin',
    password: '123456',
})
const { adminUserlogin, getAuthRoutes, initAuthRoute } = useAdminStore()

const router = useRouter()
const route = useRoute()

// 登录表单校验规则
const rules = reactive<FormRules<LoginForm>>({
    userName: [
        {
            type: 'string',
            required: true,
            message: '请输入用户名',
            trigger: 'change',
        },
        {
            pattern: /^[a-zA-Z]+[a-zA-Z0-9_]*$/,
            message: '必须是字母开头，可以包含数字、字母和_',
            trigger: 'change',
        },
        {
            min: 4,
            max: 16,
            message: '最小长度为4,最大长度为16',
            trigger: 'change',
        },
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'change',
        },
        {
            min: 6,
            message: '密码不能小于6位',
            trigger: 'change',
        },
    ],
})
const loginHandler = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid: any) => {
        if (valid) {
            loading.value = true
            const result = await adminUserlogin(loginForm)
            if (result) {
                await getAuthRoutes()
                initAuthRoute()
                const redirect: string = route.query.redirect as string
                router.push({ path: redirect ?? '/home' })
            }
            loading.value = false
        } else {
            ElNotification.error('错误提交')
        }
    })
}
</script>

<style lang="scss" scoped>
.login-wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0b1f35;

    .login-form-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
        width: 456px;
        height: 480px;
        padding: 20px;
        background-color: rgba($color: #222c8d, $alpha: 0.3);
        border-radius: 10px;
        box-shadow: 0 0 1000px rgba($color: #4580b6, $alpha: 1);

        .logo-wrapper {
            flex: 1;
            font-size: 50px;
        }

        .login-form {
            flex: 5;
            width: 100%;
            display: flex;
            align-items: center;
            flex-flow: column;

            .el-form-item {
                width: 100%;
                height: 60px;

                .el-input {
                    width: 100%;
                    height: 40px;
                    font-size: 16px;
                }
            }

            .login-form-code {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .code-box {
                    margin: 0;
                    padding: 0;
                    background-color: transparent;
                    border: none;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    cursor: pointer;

                    img {
                        width: 80px;
                        height: 40px;
                        border: 1px solid #fff;
                        margin: 0 10px;
                        border-radius: var(--el-border-radius-base);
                        overflow: hidden;
                    }
                    span {
                        width: 120px;
                        color: #fff;

                        a {
                            color: var(--el-color-primary-light-3);
                        }
                    }
                }
            }

            .login-form-submit {
                width: 100%;
                font-size: 20px;
            }
        }
    }
}
</style>
